{% extends "layout.html" %}

{% block page_title %}{{ _("Photos Management") }}{% endblock %}

{% block extra_head %}
<link href="/static/datepicker/css/datepicker.css" rel="stylesheet">
{% endblock %}

{% block admin_content %}
<div id="links_container" class="span12">

<div class="alert alert-info" style="display:none">
    <a class="close" data-dismiss="alert">&times;</a>
    <strong>{{ _("Information") }}!</strong> 
    <p id="alert-info-message"></p>
</div>


<table class="table table-hover">
    <caption><h3 class="pull-left">{{ _("Photos in Timeline") }}</h3></caption>
    <thead class="">
        <tr>
            <td>{{ _("Filename") }}</td>
            <td>{{ _("MIME") }}</td>
            <td>{{ _("Width") }}</td>
            <td>{{ _("Height") }}</td>
            <td>{{ _("Headline") }}</td>
            <td>{{ _("Text") }}</td>
            <td>{{ _("Start Date") }}</td>
            <td>{{ _("End Date") }}</td>
            <td>{{ _("Public") }}</td>
            <td>{{ _("Operations") }}</td>
        </tr>
    </thead>
    <tbody id="photos">
{% for photo in photos %}
    {% include 'photo_block.html' %}
{% endfor %}
    </tbody>
</table>

{% if navlist %}
<div class="pagination pagination-right pagination-small">
    <ul>
        {% for nav in navlist %}
        <li><a href="{{ nav[0] }}">{{ nav[1] }}</a></li>
        {% endfor %}
    </ul>
</div>
{% endif %}

    
<form id="form_photo" class="form-horizontal" action="{{ post_url }}" method="post" enctype='multipart/form-data'>
    <fieldset>
        <legend>{{ _("Add new photo in timeline") }}:</legend>
        <!-- http://duckranger.com/2012/06/pretty-file-input-field-in-bootstrap/ -->
        <input id="photofile" name="photofile" type="file" style="display:none">
        <div class="control-group">
            <label class="control-label" for="filecover">{{ _("Select Your Photo") }}</label>
            <div class="controls">
               <input id="filecover" class="input-xlarge" type="text" readonly="true" placeholder="Required">
               <a class="btn" id="filecoverbt" onclick="$('input#photofile').click();">{{ _("Browse") }}</a>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="headline">{{ _("Headline") }}</label>
            <div class="controls">
                <input type="text" class="input-xlarge" id='headline' name="headline" value="" placeholder="Required">
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="text">{{ _("Text") }}</label>
            <div class="controls">
                <textarea class="input-xlarge" id="text" rows="3" name="text" placeholder="Optional"></textarea>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="public">{{ _("Public") }}</label>
            <div class="controls">
                <label class="checkbox">
                    <input type="checkbox" id="public" name="public" checked>
                    {{ _("Check this to show it in timeline; otherwise in private") }}
                </label>
            </div>
        </div>
        <div class="control-group">
          <label class="control-label" for="startdate">{{ _("Start Date") }}</label>
          <div class="date controls" id="start_date" data-date="" data-date-format="yyyy-mm-dd">
            <input class="span2" size="16" type="text" id="startdate" name="startdate" value="" readonly placeholder="Required">
            <span class="add-on"><i class="icon-calendar"></i></span>
          </div>
        </div>
        <div class="control-group">
          <label class="control-label" for="enddate">{{ _("End Date") }}</label>
          <div class="date controls" id="end_date" data-date="" data-date-format="yyyy-mm-dd">
            <input class="span2" size="16" type="text" id='enddate' name="enddate" value="" readonly placeholder="Optional">
            <span class="add-on"><i class="icon-calendar"></i></span>
          </div>
        </div>
        <div class="form-actions">
            <input type="hidden" class="" name="current_photo_id" id="current_photo_id" value="">
            <button type="submit" class="btn btn-primary" id="bt_submit" name="bt_submit" value="save">{{ _("Save") }}</button>
        </div>
    </fieldset>
</form>
</div><!-- posts_container -->

{% endblock %}

    {% block extra_js_block %}
    <script type="text/javascript" src="/static/datepicker/js/bootstrap-datepicker.js"></script>
    <script type="text/javascript" src="/static/js/jquery-preview.js"></script>
    <script type="text/javascript">
    // init datapicker
    $('#start_date').datepicker();
    $('#end_date').datepicker();

    // replace original input=file
    $("input#photofile").change(function()
    {
       $('input#filecover').val($(this).val());
    });        

    // set click function for submit button in form
    $("button#bt_submit").click(function savePhoto(event) 
    {
        $.ajax({
            success: function(data, state) 
            {
                $("form#form_photo").submit();
            },
            error: function(e) {
                alert(e);
            },
            beforeSend: function() {
                if($("input#filecover").val() == "") {
                    alert("Please select a photo file before proceeding ... ");
                    return false;
                }
                if($("input#headline").val() == "") {
                    alert("Please set headline for the photo");
                    return false;
                }
                if($("input#startdate").val() == "") {
                    alert("Please set start date for the photo");
                    return false;
                }
            }
        });
        // remove default function of submit button
        event.preventDefault();
    });


    function editPhoto(photo_id) {
        $("form legend").text("Edit photo " + $("#photo_" + photo_id + " #filename").text())
        $("form #filecover").val($("#photo_" + photo_id + " #filename").text());
        $("form #filecoverbt").removeAttr("onclick");
        $("form #filecoverbt").attr("disabled", true);
        $("form #headline").val($("#photo_" + photo_id + " #headline").text());
        $("form #startdate").val($("#photo_" + photo_id + " #startdate").text());
        $("form #enddate").val($("#photo_" + photo_id + " #enddate").text());
        $("form #text").val($("#photo_" + photo_id + " #text").text());
        if($("#photo_" + photo_id + " #public i").attr("class") == "icon-ok")
            $("form #public").attr("checked", "checked");
        else
            $("form #public").removeAttr("checked");
        $("form #current_photo_id").val(photo_id);
        $("form #bt_submit").text("Update");

        // scroll down to edit form
        $("html, body").animate({ scrollTop: $(document).height() }, "slow");
    }

    function deletePhoto(photo_id) {
        $.ajax({
            url: '/admin/photos',
            type: 'post',
            dataType: 'json',
            data: {
                "current_photo_id": photo_id,
                "operation": "delete"
            },
            success: function(data, state) {
                // show alert message
                $("#alert-info-message").html(data.message);
                $(".alert-info").toggle(true);
                // remove tr for cate_id
                if (data.status == 'success') {
                    // don't remove this unless status == 'success'
                    $("tr#photo_" + photo_id).remove();
                }
            }
        });
    }
    </script>
    {% endblock %}